<template>
    <v-list  class="light-green lighten-5">
      <h3 class="py-3" v-show="this.$route.query.keyword">找到{{follows.length}}条记录</h3>

      <v-list-item-group>
        <my-relation :relation="follow" v-for="follow in follows" :key="follow.userId"></my-relation>
        <el-empty v-show="this.$route.query.keyword && follows.length == 0" description="未找到用户"></el-empty>
      </v-list-item-group>
    </v-list>
</template>

<script>
import MyRelation from '../views/MyRelation.vue'

export default {
  name: 'MySearchUser',
  components: {MyRelation},
  data: ()=>({
    follows: []
  }),
  watch: {
    $route: {
      handler() {
        const keyword = this.$route.query.keyword;
        this.queryUserByName(keyword); //这段话是我自己写的函数，在每次参数发生变化时运行
      },
      deep: true
    }
  },
  computed: {
    user(){
      return this.$store.state.user
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const keyword = to.query.keyword;
      // 根据路由id，查询并设置用户页的信息
      vm.queryUserByName(keyword)
    })
  },
  methods:{
    doQueryUserByName(url, config){
      this.$axios.get(url, config).then(rep=>{
        const res = rep.data
        if(res.status != 200){
          this.$message.error(res.msg)
          return;
        }
        this.follows = res.data
      }).catch(Error=>{
          console.log(Error)
      })
    },
    queryUserByName(keyword){
      if(!keyword) return

      const userId = this.user.userId
      const token = this.user.token
      
      if(userId && token){
        this.doQueryUserByName('/api/search/user/u', {
          params:{keyword, userId},
          headers: {token }
        })
      }else{
        this.doQueryUserByName('/api/search/user', {params: {keyword}})
      }
    }
  }
}
</script>

<style scoped>

</style>